import {connect} from 'react-redux'
import { Component } from 'react'
import Link from 'next/link'

import { imgBase }  from '@/utils/index'
import styles from './AreaMci.module.scss';

type IProps = {
  cityList: Array<ICity>
}
type IState = {
  cityNum: number
  moreType: boolean
}

class AreaMci extends Component<IProps, IState> {
  constructor(props) {
    super(props)
    this.state = {
      cityNum: 7,
      moreType: false
    }
  }
  // mci 城市展开
  showCity() {
    if (this.state.cityNum === 7) {
      this.setState({
        cityNum: 100
      })
    } else {
      this.setState({
        cityNum: 7
      })
    }
  }
  render() {
    const { cityList } = this.props
    const { cityNum } = this.state
    return (
      <section className={styles["areamci-box"]}>
        <div className={styles["title"]}>酒店竞争力指数MCI</div>
        <div className={styles["area-list"]}>
          {
            cityList.map( (item, index)=> {
              if (index < cityNum) {
                let query = {
                  cityId: item.id,
                  type: 0,
                  divide: 9
                }
                return (
                  <Link href={{pathname: '/hotelrankings', query: query}} as={`/hotelrankings/${item.id}/0/9`} key={`${index}-areaMci`}>
                    <a className={styles["area"]}>{item.city}</a>
                  </Link>
                )
              }
            })
          }
          <Link href="/hotelrankings">
            <a className={`${styles["area"]} ${styles["area-more"]}`}>更多</a>
          </Link>
        </div>
      </section>
    )
  }
}

const mapStateToProps = (state, ownProps) => {
  return {
    cityList: state.cityList,
  }
}

export default connect(mapStateToProps)(AreaMci)
